<script setup>
  import { ref,toRefs } from 'vue';
  import { collectSet } from '@/api/DevConnection';
  import { message } from '@/utils/message';


<<<<<<< HEAD
  const isDisabled = ref(true),
    ruleFormRef = ref(),
    ruleForm = ref({
      selectPeriod: undefined,
      selectedFormat: undefined
    }),
    ruleFormRefServer = ref(),
    ruleFormServer = ref({
      inputServer: '10.8.58.1:6443',
      inputTopics: 'topic-dataLake',
    }),
    alertTitle = ref('无'),
    alertStatus = ref('info');
=======
const ruleFormRef = ref(),
  ruleForm = ref({
    selectPeriod: undefined,
    selectedFormat: undefined
  }),
  ruleFormRefServer = ref(),
  ruleFormServer = ref({
    inputServer: '10.8.58.1:6443',
    inputTopics: 'topic-dataLake',
  }),
  alertTitle = ref('无'),
  alertStatus = ref('info');
>>>>>>> 3b24feac27ff1f3481308d21c3f5277aa3dbd283

  const props = defineProps({
    collectSettingDrawer: {
      type: Boolean,
      default: false
    },
    devVarTableSelectedItem: {
      type: Object,
      default() {
        return {}
      }
    }
  })
  const { collectSettingDrawer, devVarTableSelectedItem } = toRefs(props);
  const emit = defineEmits(['childCollectDrawer']);

  // 配置按钮
  const configClick = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
      if (valid) {
        alertTitle.value = 'kafka服务器配置已完成，等待上传';
        alertStatus.value = 'success';
      } else {
        console.log('error submit!', fields)
      }
    })
  }
  // 开始采集按钮
  const startCollectClick = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
      if (valid) {
<<<<<<< HEAD
=======
        alertTitle.value = '采集中';
        alertStatus.value = 'warning';
>>>>>>> 3b24feac27ff1f3481308d21c3f5277aa3dbd283
        collectSet({
          name: devVarTableSelectedItem.value.deviceName
        }).then(res => {
          if (res.status === 200) {
<<<<<<< HEAD
            isDisabled.value = false;
            alertTitle.value = '采集中';
            alertStatus.value = 'warning';
=======
>>>>>>> 3b24feac27ff1f3481308d21c3f5277aa3dbd283
          } else {
            message(res.message, { type: 'error' });
          }
        })
      } else {
        console.log('error submit!', fields)
      }
    })
<<<<<<< HEAD
=======
    // 处理保存路径逻辑
    // const inputElement = document.createElement("input");
    // inputElement.type = "file";
    // inputElement.webkitdirectory = true; // 在 Chrome 中选择文件夹
    // inputElement.multiple = false; // 只能选择一个文件夹
    // inputElement.onchange = event => {
    //   const selectedPath = event.target.files[0].path;
    //   if (selectedPath) {
    //     s_path.value = selectedPath;
    //     // 可以根据需要将路径信息存储在其他变量中
    //   }
    // };
    // inputElement.click();
>>>>>>> 3b24feac27ff1f3481308d21c3f5277aa3dbd283
  };

  // 停止采集按钮
  const stopCollectClick = () => {
<<<<<<< HEAD
    ruleFormRef.value.validate((valid) => {
      if (valid) {
        isDisabled.value = true;
        alertTitle.value = '数据已保存在' + devVarTableSelectedItem.value.deviceName +'文件下';
        alertStatus.value = 'success';
      } else {
        return false
      }
    })
=======
    alertTitle.value = '数据已保存在xx文件下';
    alertStatus.value = 'success';
    // devVarTableSelectedItem.value.deviceName
>>>>>>> 3b24feac27ff1f3481308d21c3f5277aa3dbd283
  };

  // 抽屉取消按钮
  const cancelClick = () => {
    emit('childCollectDrawer', false);
  };
  // 抽屉确认按钮
  const confirmClick = () => {
    emit('childCollectDrawer', false);
  };

  // 抽屉打开回调
  const handleOpen = () => {
    // inputCollect.value = "采集" + devVarTableSelectedItem.value.deviceName + "数据，保存于本地" + devVarTableSelectedItem.value.deviceName + "文件夹";
  }

  // 抽屉关闭回调
  const handleClose = () => {
    emit('childCollectDrawer', false);
  }
</script>

<template>
  <el-drawer
    :model-value="collectSettingDrawer"
    direction="rtl"
    @open="handleOpen"
    @close="handleClose"
  >
    <template #header>
      <h4>采集设置</h4>
    </template>
    <template #default>
      <div class="drawer-main">
        <el-divider content-position="left">参数配置</el-divider>
        <el-form
          ref="ruleFormRef"
          :model='ruleForm'
          :inline="true"
          label-position="top"
        >
          <el-form-item
            label="采集周期"
            prop="selectPeriod"
            style="width: 220px;"
            :rules="{ required: true, message: '请选择采集周期', trigger: 'change'}"
          >
            <el-select
              v-model="ruleForm.selectPeriod"
              placeholder="请选择采集周期"
              clearable
            >
              <el-option label="200ms" value="200ms" />
              <el-option label="300ms" value="300ms" />
              <el-option label="400ms" value="400ms" />
              <el-option label="500ms" value="500ms" />
            </el-select>
          </el-form-item>
          <el-form-item
            label="存储格式"
            prop="selectedFormat"
            style="width: 220px;"
            :rules="{ required: true, message: '请选择存储格式', trigger: 'change'}"
          >
            <el-select
              v-model="ruleForm.selectedFormat"
              placeholder="请选择存储格式"
              clearable
            >
              <el-option label="JSON" value="JSON" />
              <el-option label="CVS" value="CVS" />
              <el-option label="XML" value="XML" />
            </el-select>
          </el-form-item>
          <el-form-item style="width: 100%;">
            <div class="btn-box">
              <el-button type="primary" @click="startCollectClick(ruleFormRef)">开始采集</el-button>
<<<<<<< HEAD
              <el-button type="primary" @click="stopCollectClick" :disabled="isDisabled">停止采集</el-button>
=======
              <el-button type="primary" @click="stopCollectClick">停止采集</el-button>
>>>>>>> 3b24feac27ff1f3481308d21c3f5277aa3dbd283
            </div>
          </el-form-item>
        </el-form>
        <el-divider content-position="left">远程kafka服务器设置</el-divider>
        <el-form
          ref="ruleFormRefServer"
          :model='ruleFormServer'
          :inline="false"
          label-position="top"
        >
          <el-form-item
            label="Bootstrap Servers"
            prop="inputServer"
            :rules="{ required: true, message: '请输入Bootstrap Servers', trigger: 'blur'}"
          >
            <el-input v-model="ruleFormServer.inputServer" placeholder="10.8.58.1:6443"></el-input>
          </el-form-item>
          <el-form-item
            label="Topics"
            prop="inputTopics"
            :rules="{ required: true, message: '请输入Topics', trigger: 'blur'}"
          >
            <el-input v-model="ruleFormServer.inputTopics" placeholder="topic-dataLake"></el-input>
          </el-form-item>
          <el-form-item>
            <div class="form-item-button">
              <el-button type="primary" @click="configClick(ruleFormRefServer)">配置</el-button>
            </div>
          </el-form-item>
        </el-form>
        <el-divider content-position="left">状态</el-divider>
        <div class="button-box">
          <el-alert :title="alertTitle" :type="alertStatus" :closable="false" effect="dark" center :show-icon="true" />
          <!-- <el-input v-model="inputCollect" readonly disabled></el-input> -->
        </div>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="cancelClick">取消</el-button>
        <el-button type="primary" @click="confirmClick">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<style lang="scss" scoped>
  .btn-box {
    width: 100%;
    display: flex;
    justify-content: space-around;
  }

  .form-item-button {
    width: 100%;
    text-align: right;
  }

  .button-box {
    display: flex;

    .button-margin {
      margin-right: 30px;
    }
  }
</style>
